<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nokoSocial - Responsive Social</title>
    <!--ICONSOUT CDN-->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.6/css/unicons.css">
    <!-- <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"> -->
    <!--STYLESHEET-->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<nav>
		<div class="container">
			<h2 class="log">
				nokoScoial
			</h2>
			<div class="search-bar">
				<i class="uil uil-search"></i>
				<input type="search" placeholder="Search for creators, inspirations, and projects">
			</div>
			<div class="create">
				<label class="btn btn-primary" for="create-post">Create</label>
				<div class="profile-photo">
					<img src="./images/1.jpeg">
				</div>
			</div>
		</div>
   </nav> 

   <!-- =================MAIN=================-->
   <main>
		<div class="container">
			<!-- =================LEFT=================-->
			<div class="left">
				<a class="profile">
					<div class="profile-photo">
						<img src="./images/1.jpeg">
					</div>
					<div class="handle">
						<h4>yongfei Qu</h4>
						<p class="text-muted">@测试Demo</p>
					</div>
				</a>
				<!---------------SIDERBAR--------------->
				<div class="sidebar">
					<a class="menu-item active">
						<span><i class="uil uil-home"></i></span><h3>Home</h3>
					</a>
					<a class="menu-item">
						<span><i class="uil uil-compass"></i></span><h3>Explore</h3>
					</a>
					<a class="menu-item" id="notifications">
						<span><i class="uil uil-bell"><small class="notification-count">6+</small></i></span><h3>Notifications</h3>
						<!----------------------------NOTIFICATIONS------------------------------>
					
						<div class="notifications-popup">
							<!--1-->
							<div>
								<div class="profile-photo">
									<img src="./images/profile-1.jpeg">
								</div>
								<div class="notification-body">
									<b>Keke Benjamin</b> accept your friend request
									<small class="text-muted">2 Days Ago</small>
								</div>
							</div>
							<!--2-->
							<div>
								<div class="profile-photo">
									<img src="./images/profile-2.jpeg">
								</div>
								<div class="notification-body">
									<b>John Doe</b> commented on your post
									<small class="text-muted">1 Hour Ago</small>
								</div>
							</div>
							<!--3-->
							<div>
								<div class="profile-photo">
									<img src="./images/profile-3.jpeg">
								</div>
								<div class="notification-body">
									<b>Mary Oppong</b> and <b>283 others </b> liked your post
									<small class="text-muted">4 Minutes Ago</small>
								</div>
							</div>
							<!--4-->
							<div>
								<div class="profile-photo">
									<img src="./images/profile-4.jpeg">
								</div>
								<div class="notification-body">
									<b>Mary Oppong</b> and <b>283 others </b> liked your post
									<small class="text-muted">4 Minutes Ago</small>
								</div>
							</div>
							<!--5-->
							<div>
								<div class="profile-photo">
									<img src="./images/profile-5.jpeg">
								</div>
								<div class="notification-body">
									<b>Doris Y. Lartey</b> commented on a post you are tagged in
									<small class="text-muted">4 Minutes Ago</small>
								</div>
							</div>
							<!--6-->
							<div>
								<div class="profile-photo">
									<img src="./images/profile-6.jpeg">
								</div>
								<div class="notification-body">
									<b>Mary Oppong</b> and <b>283 others </b> liked your post
									<small class="text-muted">4 Minutes Ago</small>
								</div>
							</div>
						</div>
						<!---------------------------- END NOTIFICATION POPUP------------------------------>
					</a>
					<a class="menu-item" id="messages-notification">
						<span><i class="uil uil-envelope-alt"><small class="notification-count">6</small></i></span><h3>Messagse</h3>
					</a>
					<a class="menu-item">
						<span><i class="uil uil-bookmark"></i></span><h3>Bookmarks</h3>
					</a>
					<a class="menu-item">
						<span><i class="uil uil-chart-line"></i></span><h3>Analytics</h3>
					</a>
					<a class="menu-item" id="theme">
						<span><i class="uil uil-palette"></i></span><h3>Theme</h3>
					</a>
					<a class="menu-item">
						<span><i class="uil uil-setting"></i></span><h3>Settings</h3>
					</a>
				</div>
				<!-- =================END OF SIDEBAR=================-->
				<label for="create-post" class="btn btn-primary">Create post</label>
			</div>
			<!-- =================MIDDLE=================-->
			<div class="middle">
				<div class="stories">
					<div class="story">
						<div class="profile-photo">
							<img src="./images/profile-7.jpeg">
						</div>
						<p class="name">Your Story</p>
					</div>
					<div class="story">
						<div class="profile-photo">
							<img src="./images/profile-7.jpeg">
						</div>
						<p class="name">Lilla James</p>
					</div>
					<div class="story">
						<div class="profile-photo">
							<img src="./images/profile-7.jpeg">
						</div>
						<p class="name">Your Story</p>
					</div>
					<div class="story">
						<div class="profile-photo">
							<img src="./images/profile-7.jpeg">
						</div>
						<p class="name">Your Story</p>
					</div>
					<div class="story">
						<div class="profile-photo">
							<img src="./images/profile-7.jpeg">
						</div>
						<p class="name">Your Story</p>
					</div>
					<div class="story">
						<div class="profile-photo">
							<img src="./images/profile-7.jpeg">
						</div>
						<p class="name">Your Story</p>
					</div>
				</div>
				<!-- =================END OF STORIES=================-->
				<form class="create-post">
					<div class="profile-photo">
						<img src="./images/feed-2.jpeg">
					</div>
					<input id="create-post" type="text" placeholder="What`s on your mind, Diana?" />
					<input type="submit" value="Post" class="btn btn-primary">
				</form>
				<!-- =================FEEDS=================-->
				<div class="feeds">
					<!-- =================FEED 1=================-->
					<div class="feed">
						<div class="head">
							<div class="user">
								<div class="profile-photo">
									<img src="./images/feed-4.jpeg">
								</div>
								<div class="ingo">
									<h3>Lanna Rose</h3>
									<small>Dubai, 15 MINUTES AGO</small>
								</div>
								
							</div>
							<span class="edit">
								<i class="uil uil-ellipsis-h"></i>
							</span>
						</div>

						<div class="photo">
							<img src="./images/2.jpeg">
						</div>

						<div class="action-buttons">
							<div class="interaction-buttons">
								<span><i class="uil uil-heart"></i></span>
								<span><i class="uil uil-comment-dots"></i></span>
								<span><i class="uil uil-share-alt"></i></span>
							</div>
							<div class="bookmark">
								<span><i class="uil uil-bookmark-full"></i></span>
							</div>
						</div>

						<div class="liked-by">
							<span><img src="./images/profile-5.jpeg"></span>
							<span><img src="./images/profile-6.jpeg"></span>
							<span><img src="./images/profile-7.jpeg"></span>
							<p>Liked by <b>Ernest Achiever</b> and <b>2,
							323 othes</b></p>
						</div>
						<div class="caption">
							<p><b>Lana Rose</b> Lorem ipsum dolor sit
							quisquam eius. <span class="harsh-tag">
								#lifestyle
							</span></p>
						</div>
						<div class="comments text-muted">View all 277 comments</div>
					</div>
					<!-- =================END OF FEED=================-->
					<!-- =================FEED 2=================-->
					<div class="feed">
						<div class="head">
							<div class="user">
								<div class="profile-photo">
									<img src="./images/feed-4.jpeg">
								</div>
								<div class="ingo">
									<h3>Lanna Rose</h3>
									<small>Dubai, 15 MINUTES AGO</small>
								</div>
								
							</div>
							<span class="edit">
								<i class="uil uil-ellipsis-h"></i>
							</span>
						</div>

						<div class="photo">
							<img src="./images/3.jpeg">
						</div>

						<div class="action-buttons">
							<div class="interaction-buttons">
								<span><i class="uil uil-heart"></i></span>
								<span><i class="uil uil-comment-dots"></i></span>
								<span><i class="uil uil-share-alt"></i></span>
							</div>
							<div class="bookmark">
								<span><i class="uil uil-bookmark-full"></i></span>
							</div>
						</div>

						<div class="liked-by">
							<span><img src="./images/profile-5.jpeg"></span>
							<span><img src="./images/profile-6.jpeg"></span>
							<span><img src="./images/profile-7.jpeg"></span>
							<p>Liked by <b>Ernest Achiever</b> and <b>2,
							323 othes</b></p>
						</div>
						<div class="caption">
							<p><b>Lana Rose</b> Lorem ipsum dolor sit
							quisquam eius. <span class="harsh-tag">
								#lifestyle
							</span></p>
						</div>
						<div class="comments text-muted">View all 277 comments</div>
					</div>
					<!-- =================END OF FEED=================-->
					<!-- =================FEED 3=================-->
					<div class="feed">
						<div class="head">
							<div class="user">
								<div class="profile-photo">
									<img src="./images/feed-5.jpeg">
								</div>
								<div class="ingo">
									<h3>Lanna Rose</h3>
									<small>Dubai, 15 MINUTES AGO</small>
								</div>
								
							</div>
							<span class="edit">
								<i class="uil uil-ellipsis-h"></i>
							</span>
						</div>

						<div class="photo">
							<img src="./images/4.jpeg">
						</div>

						<div class="action-buttons">
							<div class="interaction-buttons">
								<span><i class="uil uil-heart"></i></span>
								<span><i class="uil uil-comment-dots"></i></span>
								<span><i class="uil uil-share-alt"></i></span>
							</div>
							<div class="bookmark">
								<span><i class="uil uil-bookmark-full"></i></span>
							</div>
						</div>

						<div class="liked-by">
							<span><img src="./images/profile-5.jpeg"></span>
							<span><img src="./images/profile-6.jpeg"></span>
							<span><img src="./images/profile-7.jpeg"></span>
							<p>Liked by <b>Ernest Achiever</b> and <b>2,
							323 othes</b></p>
						</div>
						<div class="caption">
							<p><b>Lana Rose</b> Lorem ipsum dolor sit
							quisquam eius. <span class="harsh-tag">
								#lifestyle
							</span></p>
						</div>
						<div class="comments text-muted">View all 277 comments</div>
					</div>
					<!-- =================END OF FEED=================-->
				</div>
				<!-- =================END OF FEEDS=================-->
			</div>
			<!-- =================END OF MIDDLE=================-->




			<!-- =================RIGHT=================-->
			<div class="right">
				<div class="messages">
					<div class="heading">
						<h4>Messages</h4><i class="uil uil-edit"></i>
					</div>
					<!-- =================SEARCH BAR=================-->
					<div class="search-bar">
						<i class="uil uil-search"></i>
						<input type="search" id="message-search" placeholder="Search messags">
					</div>
					<!-- =================MESSAGES CATEGORY=================-->
					<div class="category">
						<h6 class="active">Primary</h6>
						<h6>General</h6>
						<h6 class="message-requests">Requests(7)</h6>
					</div>
					<!-- ====MESSAGE=====-->
					<div class="message">
						<div class="profile-photo">
							<img src="./images/profile-5.jpeg" alt="">
							<div class="active"></div>
						</div>
						<div class="message-body">
							<h5>Edem Quist</h5>
							<p class="text-bold">Just woke up bruh</p>
						</div>
					</div>
					<!-- ====MESSAGE=====-->
					<div class="message">
						<div class="profile-photo">
							<img src="./images/profile-4.jpeg">
							<div class="active"></div>
						</div>
						<div class="message-body">
							<h5>Jane Doe</h5>
							<p class="text-bold">Eook up was theget</p>
						</div>
					</div>
					<!-- ====MESSAGE=====-->
					<div class="message">
						<div class="profile-photo">
							<img src="./images/profile-3.jpeg" alt="">
						</div>
						<div class="message-body">
							<h5>Willm lose</h5>
							<p class="text-bold">2 new messages</p>
						</div>
					</div>
					<!-- ====MESSAGE=====-->
					<div class="message">
						<div class="profile-photo">
							<img src="./images/profile-2.jpeg" alt="">
						</div>
						<div class="message-body">
							<h5>Edem Quist</h5>
							<p class="text-muted">lol u right</p>
						</div>
					</div>
					<!-- ====MESSAGE=====-->
					<div class="message">
						<div class="profile-photo">
							<img src="./images/profile-1.jpeg" alt="">
						</div>
						<div class="message-body">
							<h5>Masa joe</h5>
							<p class="text-muted">Book is funy</p>
						</div>
					</div>
					<!-- ====MESSAGE=====-->
					<div class="message">
						<div class="profile-photo">
							<img src="./images/feed-4.jpeg" alt="">
							<div class="active"></div>
						</div>
						<div class="message-body">
							<h5>Jack Li</h5>
							<p class="text-bold">here up quickly</p>
						</div>
					</div>
				</div>
				<!-- =================END OF MESSAGES=================-->


				<!-- =================FRIEND REQUESTS=================-->
				<div class="friend-requests">
					<h4>Requests</h4>
					<!-- Request 1 -->
					<div class="request">
						<div class="info">
							<div class="profile-photo">
								<img src="./images/profile-2.jpeg">
							</div>
							<div>
								<h5>Hajia Bintu</h5>
								<p class="text-muted">
									8 mutual friends
								</p>
							</div>
						</div>
						<div class="action">
							<button class="btn btn-primary">
								Accept
							</button>
							<button class="btn">
								Decline
							</button>
						</div>
					</div>
					<!-- Request 1 -->
					<div class="request">
						<div class="info">
							<div class="profile-photo">
								<img src="./images/profile-2.jpeg">
							</div>
							<div>
								<h5>Hajia Bintu</h5>
								<p class="text-muted">
									8 mutual friends
								</p>
							</div>
						</div>
						<div class="action">
							<button class="btn btn-primary">
								Accept
							</button>
							<button class="btn">
								Decline
							</button>
						</div>
					</div>
					<!-- Request 1 -->
					<div class="request">
						<div class="info">
							<div class="profile-photo">
								<img src="./images/profile-2.jpeg">
							</div>
							<div>
								<h5>Hajia Bintu</h5>
								<p class="text-muted">
									8 mutual friends
								</p>
							</div>
						</div>
						<div class="action">
							<button class="btn btn-primary">
								Accept
							</button>
							<button class="btn">
								Decline
							</button>
						</div>
					</div>
				</div>
			</div>
			<!-- ================= END OF RIGHT ================= -->
    </div>
   </main>

   <!-- ========================== THEME CUSTOMIZATION ========================== -->
   <div class="customize-theme" style="display: none;">
	   <div class="card">
		   <h2>Customize your view</h2>
		   <p class="text-muted">Manage you font size, color, and background.</p>

		   <!-- ============ FONT SIZES ============ -->
		   <div class="font-size">
			   <h4>Font Size</h4>
			   <div>
				   <h6>Aa</h6>
				<div class="choose-size">
					<span class="font-size-1"></span>
					<span class="font-size-2"></span>
					<span class="font-size-3 active"></span>
					<span class="font-size-4"></span>
					<span class="font-size-5"></span>
				</div>
				<h3>Aa</h3>
			   </div>
		   </div>
		   <!-- ============ PRIMARY COLOR ============ -->
		   <div class="color">
			   <h4>Color</h4>
			   <div class="choose-color">
				   <span class="color-1 active"></span>
				   <span class="color-2"></span>
				   <span class="color-3"></span>
				   <span class="color-4"></span>
				   <span class="color-5"></span>
			   </div>
		   </div>
		   <!-- ============ BACKGROUND COLORs ============ -->
		   <div class="background">
			   <h4>Background</h4>
			   <div class="choose-bg">
				   <div class="bg-1 active">
					   <span></span>
					   <h5 for="bg-1">Light</h5>
				   </div>
				   <div class="bg-2">
						<span></span>
						<h5>Dim</h5>
				   </div>
				   <div class="bg-3">
					   <span></span>
					   <h5 for="bg-3">Lights Out</h5>
				   </div>
			   </div>
		   </div>
	   </div>
   </div>



<script src="./js/index.js"></script>
</body>
</html>